<template>
  <v-touch
    class="game2048"
    @swipeup="game.moveTop()"
    @swipedown="game.moveBottom()"
    @swipeleft="game.moveLeft()"
    @swiperight="game.moveRight()"
  >
    <div class="header">
      <div class="title">2048</div>
      <div class="scorediv">
        <div class="score">
          <div>score:{{ game.score }}</div>
          <div class="scs" :class="{ scsinit: scs }">{{ game.scs }}</div>
        </div>
        <div class="score newGame" @click="start">new game</div>
      </div>
    </div>

    <div class="info">press key(👆👇👈👉) to play</div>
    <v-stage class="stage" ref="stage" :config="configKonva">
      <v-layer>
        <v-rect :config="bgRect"></v-rect>

        <template v-for="row in game.cells">
          <v-rect
            v-for="cell in row"
            :key="cell.id"
            :config="cell.config"
            ref="rect"
          ></v-rect>
          <v-text
            v-for="cell in row"
            :key="cell.id + '-text'"
            :config="cell.text.config"
            ref="text"
            @click="test(cell)"
          ></v-text>
        </template>
      </v-layer>
    </v-stage>
  </v-touch>
</template>

<script>
import Game from "./class/game.js";
var game = new Game();

export default {
  name: "game2048",
  components: {},
  props: {},
  model: [],
  data() {
    return {
      game: game,
      configKonva: game.configKonva,
      bgRect: game.bgRect,

      scs: false,
    };
  },
  filters: {},
  computed: {},
  methods: {
    // 开局
    start() {
      game.start();
    },
    score(val) {
      this.scs = false;
      setTimeout(() => {
        this.scs = true;
      }, 100);
    },
    test(e) {
      // let val;
      // if (e.value == null) {
      //   val = 1;
      //   game.sum += 1;
      // } else val = e.value;
      // e.setValue(val * 2);
    },
    eKeyEnter() {
      document.onkeydown = function (e) {
        //事件对象兼容
        let el = e || window.event || arguments.callee.caller.arguments[0];
        if (!el) return;
        if (el.keyCode == 38 || el.keyCode == 87) {
          game.moveTop(); // 上
        } else if (el.keyCode == 40 || el.keyCode == 83) {
          game.moveBottom(); // 下
        } else if (el.keyCode == 37 || el.keyCode == 65) {
          game.moveLeft(); // 左
        } else if (el.keyCode == 39 || el.keyCode == 68) {
          game.moveRight(); // 右
        }
      };
    },
  },
  mounted() {
    let rects = this.$refs.rect;
    let texts = this.$refs.text;
    let i = 0;
    for (let row = 0; row < game.size; row++) {
      for (let col = 0; col < game.size; col++) {
        let cell = game.cells[row][col];
        cell.setRect(rects[i].getNode());
        cell.text.set(texts[i++].getNode());
      }
    }
    this.eKeyEnter();
    this.start();
    game.vue = this;
  },
  created() {},
};
</script>

<style scoped>
.game2048 {
  margin: auto;
  max-width: 500px;
  height: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  margin: 10px auto;
  color: #fff;
}
.title {
  font-size: 80px;
  font-family: clear sans, helvetica neue, Arial, sans-serif;
  color: #776e65;
  font-weight: 700;
}
.scorediv {
  display: flex;
  flex-direction: column;
}

.scsinit {
  opacity: 0 ;
  top: -10px !important;
  transition: all 0.8s;
}
.scs {
  position: absolute;
  color: #776e65;
  top: 10px;
  left: 90%;
}

.score {
  position: relative;
  background-color: #bbada0;
  margin: 10px;
  padding: 15px;
  border-radius: 8px;
}
.newGame {
  background-color: #8f7a66;
  cursor: pointer;
}
.info {
  text-align: center;
  margin: 10px auto;
  color: #776e65;
}
@media screen {
  .game2048 {
    max-width: 500px;
  }
}
@media screen and (max-width: 980px) {
  .game2048 {
    max-width: 440px;
  }
}
@media screen and (max-width: 650px) {
  .game2048 {
    max-width: 280px;
  }
  .header {
    flex-direction: column;
    text-align: center;
  }
  .scorediv {
    flex-direction: row;
    justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .header {
    flex-direction: column;
    text-align: center;
  }
  .scorediv {
    flex-direction: row;
    justify-content: center;
  }
}

.stage {
  display: flex;
  justify-content: center;
}
</style>
